/** Component: API Call / Request / Response */
@use './mixins' as *;

:root {
  --custom-api-call-color: var(--strapi-neutral-800);
  --custom-api-call-gap: var(--strapi-spacing-4);
  --custom-api-call-heading-font-size: var(--strapi-font-size-sm);
  --custom-api-call-heading-font-weight: 500;
  --custom-api-call-heading-py: var(--strapi-spacing-2);
  --custom-api-call-heading-px: var(--strapi-spacing-4);
  --custom-api-call-radius: 4px;
  --custom-api-call-response-heading-background-color: var(--strapi-neutral-100);
  --custom-api-call-response-content-background-color: var(--strapi-neutral-0);
  --custom-api-call-request-heading-background-color: var(--strapi-neutral-100);
  --custom-api-call-request-content-background-color: var(--strapi-neutral-0);
  --custom-api-call-border-color: var(--strapi-neutral-200);
  --custom-code-block-background-color-highlighted: var(--strapi-neutral-200);
}

.api-call {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--custom-api-call-gap);
  margin-bottom: var(--custom-api-call-gap);

  &__request__content,
  &__request__heading,
  &__response__content,
  &__response__heading {
    background-color: var(--custom-api-call-background-color);
    color: var(--custom-api-call-color);

    code {
      background-color: transparent;
    }
  }

  &__request,
  &__response {
    border-radius: var(--custom-api-call-radius);
    // border: solid 1px var(--custom-api-call-border-color);

    &__heading,
    &__content {
      *:last-child {
        margin-bottom: 0;
      }
    }

    &__heading {
      border-top-left-radius: var(--custom-api-call-radius);
      border-top-right-radius: var(--custom-api-call-radius);
      border: solid 1px var(--custom-api-call-border-color);
      border-bottom: none;
      font-size: var(--custom-api-call-heading-font-size);
      font-weight: var(--custom-api-call-heading-font-weight);
      padding: var(--custom-api-call-heading-py) var(--custom-api-call-heading-px);
    }

    &__content {
      border-bottom-left-radius: var(--custom-api-call-radius);
      border-bottom-right-radius: var(--custom-api-call-radius);
      border: solid 1px var(--custom-api-call-border-color);
      padding: var(--custom-api-call-content-py) var(--custom-api-call-content-px);
    }
  }

  &__request {
    &__heading {
      --custom-api-call-background-color: var(--custom-api-call-request-heading-background-color);
    }

    &__content {
      --custom-api-call-background-color: var(--custom-api-call-request-content-background-color);
      --custom-api-call-content-py: var(--custom-api-call-heading-px);
      --custom-api-call-content-px: var(--custom-api-call-heading-px);

      --custom-code-block-background-color: var(--custom-api-call-response-heading-background-color);

      --custom-code-background-color: var(--custom-api-call-response-heading-background-color);
      --custom-code-border-color: transparent;
      --custom-code-color: currentColor;
    }

    & + p {
      margin-top: 24px;
    }
  }

  &__response {
    &__heading {
      --custom-api-call-background-color: var(--custom-api-call-response-heading-background-color);
    }

    &__content {
      --custom-api-call-background-color: var(--custom-api-call-response-content-background-color);

      --custom-code-block-background-color: var(--custom-api-call-response-content-background-color);
    }
  }

  .theme-code-block {
    border-radius: var(--custom-api-call-radius);

    &-highlighted-line {
      background-color: var(--strapi-neutral-150) !important;
    }

    .clean-btn {
      background-color: white;
      position: relative;
      top: -12px;

      svg,
      i::before {
        color: black;
      }

      span {
        color: black;
      }
    }

    &:has([class*="codeBlockTitle"]) {
      .clean-btn {
        top: -50px;
      }
    }
  }


  [class*="buttonGroup"],
  .ai-button-group {
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .theme-code-block:hover {
    [class*="buttonGroup"],
    .ai-button-group {
      opacity: 1;
      
      .clean-btn {
        opacity: 1 !important;
        
        svg,
        i::before,
        span {
          opacity: 0.6;
          transition: opacity 0.2s ease;
        }
      }
    }
  }

  .clean-btn:hover {
    svg,
    i::before,
    span {
      opacity: 1 !important;
    }
  }
}

@include medium-up {
  .api-call__request {
    [class*="buttonGroup"] {
      right: -24px;
      top: -66px;
    }
  }

  .api-call__response {
    [class*="buttonGroup"] {
      right: 0;
      top: -51px;
    }
  }
}

@include medium-down {
  .api-call {
    .theme-code-block {
      [class*="buttonGroup"],
      [class*="buttonGroup"] .clean-btn,
      .ai-button-group,
      .ai-button-group .clean-btn {
        opacity: 1 !important;
      }

      [class*="buttonGroup"],
      .ai-button-group {
        .clean-btn {
          svg,
          i::before,
          span {
            opacity: 1 !important;
          }
        }
      }

      [class*="buttonGroup"],
      .ai-button-group {
        right: auto;
        left: 0;
      }

      [class*="codeBlockTitle"] {
        padding-right: 84px;
      }

      &[class*="codeBlockContainer"],
      [class*="codeBlockContainer"] {
        [class*="codeBlockContent"] {
          padding-top: 48px;
        }
      }

      &:has([class*="codeBlockTitle"]) {
        .clean-btn {
          top: 8px;
        }
      }
    }
  }
}

/** Dark mode */
@include dark {
  --custom-api-call-color: var(--strapi-neutral-1000);

  --custom-api-call-request-heading-background-color: var(--strapi-neutral-100);
  --custom-api-call-request-content-background-color: transparent;

  --custom-api-call-response-heading-background-color: var(--strapi-neutral-100);
  --custom-api-call-response-content-background-color: transparent;

  .api-call {
    &__response__content,
    &__request__content {
      pre {
        border: solid 1px transparent !important;
      }
    }

    .theme-code-block {
      .clean-btn {
        background-color: var(--strapi-neutral-0);

        svg,
        i::before,
        span {
          color: var(--strapi-neutral-900);
        }
      }
    }
  }
}